<template>
  <div>
    <view class="refresh" @click="refresh(false)"
      ><uni-icons type="refreshempty" size="30"></uni-icons
    ></view>
    <slot name="default" :data="state.list"></slot>
    <uni-pagination
      v-model="paginat.page"
      :total="state.total"
      :pageSize="paginat.size"
      title="标题文字"
      :show-icon="true"
      v-show="state.total > 0"
      @change="pagination"
      key="page"
    />
  </div>
</template>

<script setup>
import {
  reactive,
  defineProps,
  onMounted,
  defineEmits,
  defineExpose,
  ref,
  nextTick,
} from "vue";
const props = defineProps({
  fetchData: {
    type: Function,
    required: true,
  },
  autoFetch: {
    type: Boolean,
    default: true,
  },
});
const pagination = () => {
  state.loading = true;
  return props.fetchData(paginat.value, done);
};
const emits = defineEmits(["rowClick"]);
const rowClick = (row) => {
  emits("rowClick", row);
};
const state = reactive({
  loading: true,
  list: [],
  total: 0,
  paginat: {
    page: 1,
    size: 15,
  },
  selectedList: [],
  filterForm: {},
});
const paginat = ref({
  page: 1,
  size: 15,
});
const done = (data) => {
  state.list = data.list;
  state.total = data.total;
  state.loading = false;
  return data.list;
};

const refresh = async (flag) => {
  if (!flag) {
    paginat.value.page = 1;
  }
  state.loading = true;
  return props.fetchData(paginat.value, done);
};

onMounted(async () => {
  if (props.autoFetch) {
    state.loading = true;
    props.fetchData(paginat.value, done);
  }
});
defineExpose({
  refresh,
});
</script>

<style lang="scss" scoped>
.refresh {
  position: fixed;
  top: 10vw;
  right: 2vw;
  cursor: pointer;
  z-index: 999;
}
</style>
